<template>
  <div class="login">
    <div class="form" v-if="denglu">
      <div class="title">账号登录</div>
      <el-input v-model="account" placeholder="请输入账号"></el-input>
      <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
      <el-button type="primary" @click="login">登录</el-button>
      <div class="link" @click="denglu = false">注册帐号</div>
    </div>
    <div class="form" v-else>
      <div class="title">账号注册</div>
      <el-input v-model="account" placeholder="请输入账号"></el-input>
      <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
      <el-input v-model="password2" type="password" placeholder="请确认密码"></el-input>
      <el-button type="primary" @click="register">注册</el-button>
      <div class="link" @click="denglu = true">返回登录</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'login',
  data(){
    return{
      input:'',
      account:'',
      password:'',
      password2:'',
      denglu:true
    }
  },
  components: {

  },
  methods:{
    login(){
      if(this.account.length==0||this.password.length==0) return
      let ui = this.$gl('userInfo')
      this.$http.login({account:this.account,password:this.password}).then(res=>{
        console.log(res);
        if(res.data.success){
          let user = ui? ui.filter(item=>{
            return item.account == this.account
          }):[]
            if(user.length){
              this.$sl('nowUser',Object.assign(user[0],res.data.user))
              this.logsuccess()
            }else{
              let arr = ui?ui:[]
              arr.push(Object.assign(userInfo,{account:this.account,password:this.password},res.data.user))
              this.$sl('nowUser',Object.assign(userInfo,{account:this.account,password:this.password},res.data.user))
              this.$sl('userInfo',arr)
              this.logsuccess()
            }
              res.data.user.role == 1?this.$sl('role',1):this.$sl('role',0)

      
      }else{
        this.$message({
            showClose: true,
            message: '登录失败,请检查用户名密码',
            type: 'error'
          });
        // let arr = []
        // arr.push(Object.assign(userInfo,{account:this.account,password:this.password}))
        // this.$sl('nowUser',Object.assign(userInfo,{account:this.account,password:this.password}))
        // this.$sl('userInfo',arr)
        // this.logsuccess()
      }
        
      }).catch(err=>{
        console.log(err);
      })
     
    },
    register(){
      if(this.account.length==0||this.password.length==0) return
      if(this.password !== this.password2) {
        this.$message({
          showClose: true,
          message: '两次密码不相同',
          type: 'error'
        });
        return
      }
      this.$http.register({account:this.account,password:this.password}).then(res=>{
        console.log(res);
        let ui = this.$gl('userInfo')
        if(res.data.success){
          this.login()
        }else{
          this.$message({
            showClose: true,
            message: '账户名已存在',
            type: 'error'
          });
        }
      }).catch(err=>{
        console.log(err);
      })
      
      // if(ui){
      //   let user = ui.filter(item=>{
      //     return item.account == this.account
      //   })
      //   if(user.length){
      //     
      //   }else{
      //     ui.push(Object.assign(userInfo,{account:this.account,password:this.password}))
      //     this.$sl('nowUser',Object.assign(userInfo,{account:this.account,password:this.password}))
      //     this.$sl('userInfo',ui)
      //     this.logsuccess()
      //   }
        
      // }else{
      //   
      // }
    
    },
    logsuccess(){
      this.$message({
          showClose: true,
          message: '登录成功',
          type: 'success'
      });
      localStorage.setItem('islogin',1)
      this.$router.push('/home')
    }
  }
}
</script>
<style lang="less" scoped>
.login{
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/login_banner.png");
  background-size:100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .form{
    // transform: scale(0.8);
    // text-align: left;
    width: 640px;
    min-height: 480px;
    border-radius: 20px;
    background-color: #fff;
    padding: 35px 62px;
    .link{
      margin-top: 16px;
      cursor: pointer;
      color: #2878ff;
    }
    .title{
      font-size: 36px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      // color: #FFFFFF;
      line-height: 50px;
      margin-bottom: 47px;
    }
    /deep/ .el-input{
      height: 58px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 28px;
      margin-bottom: 30px;
      border-radius: 8px;
      input{
        height: 58px;
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 28px;
        margin-bottom: 30px;
        border-radius: 8px;
      }
    }
    /deep/ .el-button{
      width: 100%;
      height: 63px;
      border-radius: 32px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 33px;
    }
  }
}
</style>
